<template>
  <div>
    <el-dialog
      title="添加case"
      :visible.sync="dialogCase.show"
      width="80%"
      center
      @close="closecase"
    >
      <el-form ref="form2" label-width="100px" size="mini" :rules="formrules1">
        <el-select
          v-model="selected"
          value-key="group_id"
          placeholder="请选择业务线"
          prop="group_name"
          @change="func1()"
        >
          <el-option
            v-for="item in option1"
            :key="item.group_name"
            :value="item"
            :label="item.group_name"
          >{{ item.group_name }}</el-option> </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
        <el-select
          v-model="selected1"
          placeholder="请选择产品线"
          @change="func2()"
        >
          <el-option
            v-for="item in options2"
            :key="item.project_name"
            :value="item.project_name"
            prop="projtct_name"
          >{{ item.project_name }}</el-option> </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
        <el-select
          v-model="selected2"
          placeholder="请选择case"
          @change="func3()"
        >
          <el-option
            v-for="item in options3"
            :key="item.id"
            :label="item.case_name"
            :value="item.id"
            prop="case_name"
          >{{ item.case_name }}</el-option> </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
        <el-select v-model="selected3" placeholder="请选择节点">
          <el-option
            v-for="item in options4"
            :key="item.node_name"
            :label="item.node_name"
            :value="item.node_id"
            prop="node_name"
          >{{ item.node_name }}</el-option> </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button type="primary" @click="dialogFormAddCase()">添加</el-button>
        <el-divider content-position="left" style="color: dodgerblue" />
      </el-form>
      <el-table
        :data="selList"
        :header-cell-style="{ background: 'dodgerblue', color: '#eeeeee' }"
        :fit="true"
        style="width: 100%"
      >
        <el-table-column property="id" label="ID" sortable min-width="10%" />
        <el-table-column
          property="group_name"
          label="业务线"
          sortable
          min-width="30%"
        />
        <el-table-column
          property="project_name"
          label="产品线"
          sortable
          min-width="30%"
        />
        <el-table-column
          property="case_name"
          label="用例名称"
          sortable
          min-width="30%"
        />
        <el-table-column
          property="node_name"
          label="节点名称"
          sortable
          min-width="30%"
        />
        <el-table-column property="id" label="操作" align="center" min-width="40%">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.case_type === 3"
              type="primary"
              size="mini"
              :disabled="true"
              round
            >手动部署</el-button>
            <el-button
              v-else-if="scope.row.is_deploy === 0 && scope.row.case_type != 3"
              type="primary"
              size="mini"
              round
              @click="tableRowDeploy(scope.row)"
            >手动部署</el-button>
            <el-button
              v-if="scope.row.is_deploy === 1 && scope.row.case_type != 3"
              type="success"
              size="mini"
              round
              @click="tableRowStart(scope.row)"
            >启动</el-button>
            <el-button
              v-if="scope.row.is_deploy === 1 && scope.row.case_type != 3"
              type="info"
              size="mini"
              round
              @click="tableRowStop(scope.row)"
            >停止</el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="handleDelete(scope.$index, scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { get_project } from '@/api/ci'
import { sel_case } from '@/api/ci'
import { addcase } from '@/api/ci'
import { dell_taskcase } from '@/api/ci'
import { sel_node } from '@/api/node'
import { remoteGit, remoteStop, remoteStart } from '@/api/case'
import { Message } from 'element-ui'

export default {
  name: 'Case',
  props: {
    dialogCase: {
      type: Object,
      required: true
    },
    option1: {
      type: Array,
      required: true
    },
    selList: {
      type: Array,
      required: true
    },
    taskid: {
      type: NaN,
      required: true
    }
  },
  data() {
    return {
      selected: '',
      selected1: '',
      selected2: '',
      selected3: '',
      options2: [],
      options3: [],
      options4: [],
      formrules1: {
        group_name: [
          { required: true, message: '业务线不能为空', trigger: 'blur' }
        ],
        project_name: [
          { required: true, message: '产品线不能为空', trigger: 'blur' }
        ],
        case_name: [
          { required: true, message: 'case不能为空', trigger: 'blur' }
        ],
        node_name: [
          { required: true, message: '节点不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    func1: function() {
      if (this.selected1 || this.selected3) {
        // this.project_namelist = ''
        this.selected1 = ''
        this.selected2 = ''
        this.selected3 = ''
      }
      var group_id = this.selected.group_id
      get_project(group_id).then((res) => {
        this.options2 = res.data
      })
    },
    func2: function() {
      var data = new URLSearchParams()
      var group = this.selected.group_name
      var project = this.selected1
      data.append('group', group)
      data.append('project', project)
      sel_case(data).then((res) => {
        this.options3 = res.data
      })
    },
    func3: function() {
      sel_node().then((res) => {
        this.options4 = res.data
      })
    },
    dialogFormAddCase: function() {
      if (
        this.selected === '' ||
        this.selected1 === '' ||
        this.selected2 === '' ||
        this.selected3 === ''
      ) {
        this.$message({
          type: 'error',
          message: '下拉框均不可为空'
        })
      } else {
        var data = new URLSearchParams()
        var taskId = this.taskid
        var case_id = this.selected2
        var node_id = this.selected3
        data.append('task_id', taskId)
        data.append('case_id', case_id)
        data.append('node_id', node_id)
        addcase(data).then((res) => {
          this.$message({
            type: 'success',
            message: res.message
          })
          this.selected = ''
          this.selected1 = ''
          this.selected2 = ''
          this.selected3 = ''
          this.options2 = []
          this.options3 = []
          this.options4 = []
        })
        this.$emit('addCase')
      }
    },
    handleDelete(index, row) {
      var data = new URLSearchParams()
      var taskid = this.taskid
      var case_id = row.id
      data.append('task_id', taskid)
      data.append('case_id', case_id)
      dell_taskcase(data).then((res) => {
        this.$message({
          type: 'success',
          message: res.message
        })
        this.$emit('addCase') // 删除数据，更新视图
      })
    },
    closecase() {
      this.selected = ''
      this.selected1 = ''
      this.selected2 = ''
      this.selected3 = ''
    },
    tableRowDeploy(row) {
      this.listLoading = true
      remoteGit(row.id, row.node_id, row.task_id).then((res) => {
        this.listLoading = false
        if (res.code === 20000) {
          Message.success('部署成功')
          this.getList()
        } else {
          Message.error('部署失败')
        }
      })
    },
    tableRowStop(row) {
      this.listLoading = true
      remoteStop(row.id, row.node_id, row.task_id).then((res) => {
        this.listLoading = false
        if (res.code === 20000) {
          Message.success('停止成功')
          this.getList()
        } else {
          Message.error('停止失败')
        }
      })
    },
    tableRowStart(row) {
      this.listLoading = true
      remoteStart(row.id, row.node_id, row.task_id).then((res) => {
        this.listLoading = false
        if (res.code === 20000) {
          Message.success('启动成功')
          this.getList()
        } else {
          Message.error('启动失败')
        }
      })
    }
  }
}
</script>
